<template>
<div class="mui-slider">
		<div class="tip" @tap="goIn" v-show="showIs"> 立即体验</div>
		<div id="slider" class="mui-slider" @slide="changeTab">
			<div class="mui-slider-group">
				<div class="mui-slider-item" v-for="item in items">
					<a href="#">
						<img :src="item.src"/>
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
					<div class="mui-indicator" v-for='(item,index) in items' :class="{'mui-active' :index===0}"></div>
			</div>
		</div>
</div>
</template>

<script>
	import mui from 'static/js/mui'
	import item1 from './img/item1.png'
	import item2 from './img/item2.png'
	import item3 from './img/item3.png'
	export default{
		data(){
			return{
				items:[{
					src:item1
				},{
					src:item2
				},{
					src:item3
				}],
				logo1:item1,
				logo2:item2,
				logo3:item3,
				setindex:-1,
				showIs:false
			}
		},
		mounted(){
			//获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
				  interval:0//自动轮播周期，若为0则不自动播放，默认为0；
				});
		},
		methods:{
			change(item,index){							
				item.sets = !item.sets
			},
			goIn(){				
				//获取个性化信息
				var that = this;	
				//写入缓存
				localStorage.setItem('firstIn','first');
				that.$router.push('/home')		
			},
			changeTab(e){
				//console.log(e.detail.slideNumber)
				if(e.detail.slideNumber == 2){
					this.showIs = true
				}
				else{
					this.showIs = false
				}
			}
		}
	}
</script>

<style scoped>
	.mui-slider-indicator{
		bottom:30px;
	}
	.mui-slider-indicator .mui-active.mui-indicator {
    	background: #f0ad4e;
	}
	.mui-slider{
		position:absolute;
		top:0;
		bottom:0
	}
	.mui-slider-group,.mui-slider-item,.mui-slider-item a,.mui-slider-item a img{
		height:100%
	}
	.tip{
		z-index:99;
		width:7rem;
		height:1.5rem;		
		text-align:center;
		line-height:1.5rem;
		position:absolute;
		bottom:3rem;
		left:50%;
		margin-left:-3.5rem;
		color:grey;
		border: 1px solid #ccc;
		border-radius:1rem;
		font-size:0.9rem;
	}
	.box{
		z-index:99;
		width:4rem;
		height:11.5rem;		
		text-align:center;
		position:absolute;
		top:5rem;
		left:50%;
		margin-left:-2rem	
	}
	.top{
		z-index:99;
		width:8rem;
		height:2rem;		
		text-align:center;
		position:absolute;
		top:0.5rem;
		left:50%;
		margin-left:-4rem;
		line-height:2rem;
		background:rgba(240, 173, 78,0.8);
		color: #9e2222;
		font-size: 12px		
	}
	.test{
		width:4rem;
		height:2.5rem;
		line-height:2.5rem;
		background:rgba(77, 197, 170, 0.8);
		color:#555;
		margin-bottom:0.4rem;
		font-size:0.6rem
	}
	 
</style>